import { Card, Input, Form,  Radio, Button } from "antd";
import React from "react";
import { EyeInvisibleOutlined, EyeTwoTone } from "@ant-design/icons";

function AddUser() {
  const tailFormItemLayout = {
    wrapperCol: {
      xs: {
        span: 24,
        offset: 0,
      },
      sm: {
        span: 16,
        offset: 2,
      },
    },
  };
  const onFinish = (values) => {
    console.log(values)
  };
  const onFinishFailed = (values) => {
    console.log(values)
  };

  return (
    <div>
      <Card title="新增用户">
        <Form
          name="addUserByManager"
          initialValues={{ remember: true }}
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 13 }}
          style={{ width: "50%" }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >
          <Form.Item
            label="用户名"
            name="userName"
            rules={[
              {
                required: true,
                message: "请输入用户名",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="userPwd"
            label="密码"
            rules={[
              {
                required: true,
                message: "密码不得为空!",
              },
              {
                pattern: new RegExp(
                  "^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$"
                ),
                message: "密码为包含英文和数字的6-12位字符！",
              },
            ]}
            hasFeedback
          >
            <Input.Password
              iconRender={(visible) =>
                visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
              }
            />
          </Form.Item>

          <Form.Item
            name="confirmPwd"
            label="确认密码"
            dependencies={["userPwd"]}
            hasFeedback
            rules={[
              {
                required: true,
                message: "请再次确认密码!",
              },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue("userPwd") === value) {
                    return Promise.resolve();
                  }

                  return Promise.reject(new Error("两次输入的密码不一致!"));
                },
              }),
            ]}
          >
            <Input.Password
              iconRender={(visible) =>
                visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
              }
            />
          </Form.Item>
          <Form.Item
            name="email"
            label="E-mail"
            rules={[
              {
                type: "email",
                message: "请输入正确的邮箱地址!",
              },
              {
                required: true,
                message: "邮箱不得为空!",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="phone"
            label="电话号码"
            rules={[
              {
                required: true,
                message: "请输入您的电话号码!",
              },
              {
                len: 11,
                message: "请输入正确的电话号码",
              },
            ]}
          >
            <Input
              style={{
                width: "100%",
              }}
            />
          </Form.Item>
          <Form.Item
            name="userRole"
            label="用户角色"
            rules={[
              {
                required: true,
                message: "请选择用户的角色",
              },
            ]}
          >
            <Radio.Group>
              <Radio.Button value="0">管理员</Radio.Button>
              <Radio.Button value="1">普通用户</Radio.Button>
            </Radio.Group>
          </Form.Item>
          <Form.Item {...tailFormItemLayout}>
            <Button type="primary" htmlType="submit">
              添加用户
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
}

export default AddUser;
